Google Maps API - Gestion des markers | NGLESSON - Blog

Google Maps API - Gestion des markers

Voici le code complet qui vous permettra de tester cet exemple dans une page HTML. Notez que les URLs d'accès aux images sont différentes et que le style appliqué à la fenêtre ne possède pas toute la définition présente par défaut sur notre site.

1-Modification de l'icone du marker

Pour modifier l'icone du marker, il suffit de lui préciser un paramètre supplémentaire lors de sa construction avec l'objet google.maps.MarkerImage.

2-Ajout d'une fenêtre d'information

Maintenant, nous allons ajouter une fenêtre d'information qui apparaitra lorsque l'on clique sur le marker.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
    </head>

    <body>
        <div id="map" style="width:100%; height:100%"></div>
    </body>
</html>
<script type="text/javascript">
    var options = {
        center: new google.maps.LatLng(34.000262, -6.868718),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
        
    var map = new google.maps.Map(document.getElementById("map"), options);
    
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(34.000262, -6.868718),
        map: map,
        title: "Mezgani said",
        icon: new google.maps.MarkerImage('http://www.mezganisaid.com/blog/articles_img/Location-marker.png')
    });
    
    var infoWindowOptions = {
        content: '<center>'
            + '<a href="http://www.mezganisaid.com/Freelance2/" target="_blank"><img src="http://www.mezganisaid.com/z-include/images/mezganisaid.gif" width="200px" /><br>Mon portfolio</a>'
            + '</center>'
    };

    var infoWindow = new google.maps.InfoWindow(infoWindowOptions);

    google.maps.event.addListener(marker, 'click', function() {
        infoWindow.open(map, marker);
    });
</script>